<template>
	<view class="team-switch-group" :class="[switchActive?'team-switch-group-active':'team-switch-group-inactive']"
		@click="switchChange">
		<view class="team-switch-button"
			:class="[switchActive?'team-switch-button-active':'team-switch-button-inactive']"
			:style="{backgroundColor:(switchActive?activeColor:inactiveColor)}"></view>
		<view class="team-switch-text" :class="[switchActive?'team-switch-text-active':'team-switch-text-inactive']"
			:style="{color:(switchActive?activeColor:inactiveColor)}">
			{{switchActive?this.activeText:this.inactiveText}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "min-switch",
		props: {
			value: {
				type: [Boolean, Number],
				default: false
			},
			activeColor: {
				type: String,
				default: '#32539b'
			},
			inactiveColor: {
				type: String,
				default: '#a9a7b7'
			},
			activeText: {
				type: String,
				default: '可查看'
			},
			inactiveText: {
				type: String,
				default: '不可查看'
			}
		},
		data() {
			return {
				switchActive: false
			}
		},
		mounted(){
			this.switchActive=this.value;
		},
		watch: {
			value: function(val, old) {
				if (val != old) {
					this.switchActive = val;
				}
			}
		},
		methods: {
			switchChange() {
				this.$emit('change',!this.switchActive)
			}
		}
	}
</script>

<style lang="scss">
	.team-switch-group-active {
		background-color: #e5e9f4;
	}

	.team-switch-group-inactive {
		background-color: #f0f0ef;
	}

	.team-switch-group {
		width: 160rpx;
		height: 60rpx;
		position: relative;
		border-radius: 60rpx;

		.team-switch-button {
			position: absolute;
			top: 0;
			left: 0;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			animation: transform .9s;
		}

		.team-switch-button-active {
			animation: buttonLeft .2s linear forwards;
		}

		.team-switch-button-inactive {
			transform: translateX(0);
			animation: buttonRight .2s linear forwards;
		}

		.team-switch-text {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 20rpx;
		}

		.team-switch-text-active {
			padding-right: 65rpx;
			text-align: right;
		}

		.team-switch-text-inactive {
			padding-left: 65rpx;
		}
	}
	@keyframes buttonRight {
	  from {
	    transform: translateX(165%);
	  }
	
	  to {
	    transform: translateX(0);
	  }
	}
	@keyframes buttonLeft {
	  from {
	   transform: translateX(0);
	  }
	
	  to {
	    transform: translateX(165%);
	  }
	}
</style>
